<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <link rel="stylesheet" href="demo.css">
    <title>模板语法</title>
</head>

<body id="app">
    <div align="center">
        <!-- 【自定义 商品 列表】 -->
        <div>
            <h1>商品购买页</h1>
            <!-- 第1行 商品 -->
            <div class="main">

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 第2行 -->
            <div class="main2">


                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>


                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

                <div class="shop">
                    <!-- 图片 -->
                    <a :href=web><img style="width: 200px; height: 200px" :src=imgName></a>
                    <div style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <a :href=web><label class="shopName">{{name}}</label></a>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label class="shopMoney">{{money}}</label>
                        </div>
                        <!-- 购买 -->
                        <div class="button">
                            <a :href=web><input type="button" value="+" class="fileinput-button"></a>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</body>

<script>

    let app = Vue.createApp({
        data: function () {
            return {

                name: '塞尔达王国之泪',
                money: '389元',
                imgName: './zelda.webp',
                web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail'
            }
        }

    })

    app.mount("#app");
</script>

</html>